<template>
	<view class="pages">
		<!-- #ifdef H5 -->
		<u-form :model="form" ref="uForm">
			<u-form-item>
				<u-input type="number" placeholder="请输入手机号码" v-model="form.phone" />
			</u-form-item>
			<u-form-item>
				<u-input placeholder="请输入验证码" v-model="form.codes">
					<template #suffix>
						<u-button type="success" size="small" :disabled="disabled" @click="send">{{ btnText }}</u-button>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item>
				<u-button type="error" @click="submit">提交</u-button>
			</u-form-item>
		</u-form>
		<!-- #endif -->
		<u-divider text="广州市震海影业有限公司提供技术支持"></u-divider>
	</view>
</template>

<script>
	import { loginBySms, sendSms } from '../common/api/movie.js';
	export default {
		data() {
			return {
				btnText: '获取验证码',
				totalTime: 30,
				disabled: false,
				form: {
					phone: '',
					codes: ''
				}
			}
		},
		methods: {
			// 提交
			async submit() {
				let res = await loginBySms(this.form);
				if (res.data) {
					uni.setStorageSync("userInfo", JSON.stringify(res.data));
					uni.redirectTo({
						url: '/sub_pages/movie/index/index',
					});
				} else {
					getApp().globalData.subcontracting_movie?.$utils?.showToast?.(res.msg);
				}
			},
			// 发送短信
			async send() {
				let res = await sendSms(this.form);
				if (res.status == 400) {
					getApp().globalData.subcontracting_movie?.$utils?.showToast?.(res.msg);
				} else {
					this.countDown();
					getApp().globalData.subcontracting_movie?.$utils?.showToast?.("发送成功");
				}
			},
			// 倒计时
			countDown() {
				if (this.disabled) return;
				this.disabled = true;
				this.btnText = this.totalTime + 's后重新发送';
				let clock = window.setInterval(() => {
					this.totalTime --
					this.btnText = this.totalTime + 's后重新发送';
					if (this.totalTime < 0) {
						window.clearInterval(clock);
						this.btnText = '重新发送验证码'
						this.totalTime = 30;
						this.disabled = false;
					}
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		margin: 20rpx;
	}
</style>
